<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
	</head>
	<body>
		
		
		 <div id="app">
			 <a href="http://www.baidu.com">百度</a> 
			 <!-- 2.定义路由的请求地址
					1.router-link 在解析之后会形成a标签
					2.to="" 在解析之后形成href属性,实现页面跳转
				-->
			 <router-link to="/home">家</router-link>
			 <router-link to="/dog">狗子</router-link>
			 <router-link to="zoo">动物园</router-link>
			 <!-- 3.一般需要在当前页面中展现新组件的内容(html) 
					提前设定展现内容 之后被渲染成为一个div-->
			 <router-view></router-view>
			 
			 
		 </div>
		 <!-- 定义home模板-->
		 <template id="homeTem">
			 <div>
				 <h1>这里是窝</h1>
			 </div>
		 </template>
		 
		 <!-- 定义dog模板-->
		 <template id="dogTem">
		 			 <div>
		 				 <h1>这里是一只二哈</h1>
		 			 </div>
		 </template>
		
		 <template id="zooTem">
			 <div>
				 <h1>这里时动物园</h1>
				 <router-link to="/zoo/lion">狮子</router-link>
				 <router-link to="/zoo/tiger">老虎</router-link>
				 <!-- 设定路由占位符-->
				 <router-view></router-view>
			 </div>
		 </template>
		 
		 <template id="lionTem">
		 			 <div>
		 				 <h1>我是师子</h1>
		 			 </div>
		 </template>
		 <template id="tigerTem">
		 			 <div>
		 				 <h1>我是老虎</h1>
		 			 </div>
		 </template>
		 
		
		<!-- 1.导入js 注意顺序  先导入vue 后导入路由-->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			//1.定义组件变量
			let homeCom ={
				template: "#homeTem"
			}
			
			let dogCom ={
				template: "#dogTem"
			}
			
			let zooCom={
				template: "#zooTem"
			}
			
			let lionCom={
				template: "#lionTem"
			}
			
			let tigerCom={
				template: "#tigerTem"
			}
			/* 3.实现请求与路由的绑定   定义路由对象
				routes, 是一个数组的结构,数组中包含对象的结构
				path:拦截请求的路径名
				component: 组件名称
			 */
			const router = new VueRouter({
				routes: [
					{path:"/home",component: homeCom},
					{path:"/dog",component: dogCom},
					{path:"/zoo",component: zooCom,
					children:[
						{path:"/zoo/lion",component: lionCom},
						{path:"/zoo/tiger",component: tigerCom},
						]}
					]
			})
			
			//4.将路由对象与vue实例绑定
			const app =new Vue({
				el:"#app",
				router
			})
			
			
		</script>
	</body>
</html>
